`1c2
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <select class="province">
        <option value="">请选择省份</option>
        <!-- <option value="A001">北京</option>
        <option value="A002">上海</option>
        <option value="A003">湖北</option>
        <option value="A004">湖南</option> -->
    </select>
    <select class="city" name="" id="">
        <option value="">请选择市/区</option>
        <!-- <option value="A001">朝阳</option>
        <option value="A002">海淀</option>
        <option value="A003">沙河</option>
        <option value="A004">上地</option> -->
    </select>
    <!-- <select class="town" name="" id="">
        <option value="">请选择县/镇</option>
        <option value="A001">朝阳</option>
        <option value="A002">海淀</option>
        <option value="A003">沙河</option>
        <option value="A004">上地</option>
    </select> -->
    <script>
        const province = document.querySelector('.province')
        const city = document.querySelector('.city')
        var xhr = new XMLHttpRequest();
        xhr.open("get", "../data/pro.json", true)
        xhr.send()
        xhr.addEventListener("readystatechange", function () {
            if (xhr.readyState == 4 && xhr.status == 200) {
                var str = JSON.parse(xhr.responseText)
                // var str2 = JSON.parse(str)

                var provinceList = str.list
                console.log(provinceList);
                var html = ''
                provinceList.forEach(function (item) {
                    var city_name = item.city_name
                    var city_id = item.city_id
                    // console.log(city_name);
                    html += `
                    <option value="${city_id}">${city_name}</option>
                    `

                })
                province.innerHTML += html

                province.addEventListener("change", function () {
                    city.innerHTML = `
                    <option value="">请选择市/区</option>
                    `

                    var province_id = this.value
                    var x = 1
                    console.log(province_id)
                    var arr = provinceList.filter(function (item) {
                        var city_id = item.city_id
                        // console.log(city_id)
                        return city_id == province_id
                    })
                    console.log(arr)
                    var cityList = arr[0].list
                    // console.log(cityList);
                    var html2 = ''
                    cityList.forEach(function (item) {
                        var city_name = item.city_name
                        var city_id = item.city_id
                        html2 += `
                        <option value="${city_id}">${city_name}</option>
                    `

                    })
                    city.innerHTML += html2

                })


            }
        })
    </script>
</body>

</html>